<template>
	<div class="detail_main">
		<div class="detail_main_top">
			<div class="detail_top_left ">
				<div class="detail_top_leftP1 like_btn" @click="$router.back(-1)">
					<i class="el-icon-arrow-left"></i>返回
				</div>
			</div>
			<span>{{paperInfoBefore.paperName}}</span>
			<div class="detail_top_right">
				<div class="detail_top_leftP2 detail_top_leftP3">
					总分数：{{paperInfo.totalScore || 0}}
				</div>
				<div class="detail_top_leftP2">
					得分：<span>{{paperInfo.score || 0}}分</span>
				</div>
				<div class="detail_top_leftP2">
					<span v-if="paperInfo.score < paperInfo.passScore" class="errorColor">不及格</span>
					<span v-if="paperInfo.score >= paperInfo.passScore" class="primaryColor">及格</span>
				</div>
				<div class="detail_top_leftP2">
					用时：<span>{{paperInfo.duration || 0}}分钟</span>
				</div>
			</div>
		</div>
		<div class="detail_main_bottom clearfix">
			<div class="exam_topic">
				<div class="exam_topicitem beautifulScroll" v-if="questionIndex>=0 ">
					<div class="menu_leftlabel" v-if="questions[questionIndex].questionType == item.value" v-for="(item,index) in questionTypes">
						{{item.name}}<span>（共{{getArray(item.value).length}}题，总分{{getScore(item.value)}}分）</span>
					</div>
					<questionview :readonly='true' :form="item" :letters="letters" :questionTypes="questionTypes" v-for='(item,index) in questions' v-if="item.questionIndex == questionIndex"></questionview>

					<div class="menu_leftanswe">
						<div class="topic_infoP1" v-if="questions[questionIndex].questionType !='SHORT' && questions[questionIndex].questionType !='ANALYSIS'">
							<span class="successColor" v-if="questions[questionIndex].isError == 2">回答正确</span>
							<span class="errorColor" v-if="questions[questionIndex].isError == 1">回答错误</span>
						</div>
						<div class="topic_infoP1">
							您的答案：{{questions[questionIndex].userAnswer|| '无'}}
						</div class="topic_infoP1">
						<div class="topic_infoP1">
							正确答案：<span class="editor_box" v-html='questions[questionIndex].answer'></span>
						</div>
						<div class="topic_infoP1">
							难度：<span v-for='item in difficultys' v-if="item.value == questions[questionIndex].difficulty">{{item.name}}</span>
						</div>
						<div class="topic_infoP2" v-if="questions[questionIndex].analysis">
							解析：<span class="editor_box" v-html='questions[questionIndex].analysis'></span>
						</div>
						<div class="topic_infoP2" v-if="questions[questionIndex].questionCorrectContent">
							批阅：{{questions[questionIndex].questionCorrectContent}}
						</div>
					</div>
				</div>
				<div class="detail_right_control">
					<el-button @click='questionIndex--' type='primary' :disabled='questionIndex<=0' size='small'>上一题</el-button>
					<el-button @click='questionIndex++' type='primary' :disabled='questionIndex>=questions.length-1' size='small'>下一题 </el-button>
				</div>
			</div>
			<div class="menu_detailcard ">
				<div class="exam_info">
					<div class="exam_infoicon">
						<img :src="baseurl + userinfo.headPortraitUrl" v-if="userinfo && userinfo.headPortraitUrl" />
						<img src="@/images/1.png" v-else/>
					</div>
					<div class="exam_infop1">
						姓名：{{userinfo.studentName}}
					</div>
					<div class="exam_infop2">学号：{{userinfo.studentNo}}</div>
				</div>
				<div class="menu_detailcardscroll menu_detailcardscrollleft beautifulScroll">
					<div class="question_types" v-if="getArray(item.value).length" v-for="(item,index) in questionTypes">
						<div class="question_typeinfo">
							{{item.name}}<span>（共{{getArray(item.value).length}}题，总分{{getScore(item.value)}}分）</span>
						</div>
						<div class="question_typenums clearfix">
							<div class="question_typenum" @click="questionIndex = topic.questionIndex" :class='getTopicClass(topic)' v-for="topic in getArray(item.value)">{{topic.indexId}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import questionview from "@/components/questions.vue"
	import questionsjs from '@/components/questions.js'
	import { selectStudentDetail } from "@/api/center.js"
	import { paperQuestionAnswerList, paperStudyDetail } from "@/api/paper.js"
	export default {
		mixins: [questionsjs],
		components: {
			questionview
		},
		data() {
			return {
				paperId: this.$route.query.paperId,
				paperInfoBefore: {},
				paperInfo: {},
				allOver: false,
				userinfo: {},
				timer: null,
				questions: [],
				questionIndex: -1,
				letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
				nums: ['一', '二', '三', '四', '五', '六', '七', '八', '九'],
				difficultys: [{
					name: '简单',
					value: 'SIMPLE'
				}, {
					name: '中等',
					value: 'MEDIUM'
				}, {
					name: '困难',
					value: 'DIFFICULTY'
				}],
				questionTypes: [{
					name: '单选题',
					value: 'SINGLE'
				}, {
					name: '多选题',
					value: 'MULTIPLE'
				}, {
					name: '判断题',
					value: 'JUDGE'
				}, {
					name: '简答题',
					value: 'SHORT'
				}, {
					name: '病例解析题',
					value: 'ANALYSIS'
				}],
				SINGLE: [],
				MULTIPLE: [],
				JUDGE: [],
				ANALYSIS: [],
				SHORT: [],
				COMPATIBILITY: [],
				COMPREHENSIVE: [],
				//最初
				SINGLEORI: [],
				MULTIPLEORI: [],
				JUDGEORI: [],
				ANALYSISORI: [],
				SHORTORI: [],
				//试题分数
				SINGLENUM: 0,
				MULTIPLENUM: 0,
				JUDGENUM: 0,
				ANALYSISNUM: 0,
				SHORTNUM: 0,
			}
		},
		created() {
			this.getinfo();
			this.getTestDetail();
		},
		mounted() {

		},
		methods: {
			getinfo() {
				selectStudentDetail().then(res => {
					if(res.code == '200') {
						this.userinfo = res.data;
					}
				})
			},
			getTestDetail() {
				paperStudyDetail({
					paperId: this.paperId
				}).then(res => {
					if(res.data.paperStatus == 1) {
						this.setBack('当前考试未开始，请稍后重试！')
						return
					}
					if(res.data.paperStatus == 2) {
						this.setBack('考试进行中，请稍后重试！')
					}
					if(res.data.paperStatus == 3) {
						if(res.data.submitStatus == 1) {
							this.paperInfoBefore = res.data
							this.getTest()
							return
						} else {
							this.setBack('当前考试未提交，无法查看！')
						}
						return
					}
				})
			},
			setBack(message) {
				this.$alert(message, '提示', {
					confirmButtonText: '确定',
					type: 'warning'
				}).then(() => {
					this.$router.back(-1);
				}).catch(() => {
					this.$router.back(-1);
				})
			},
			getTest() {
				paperQuestionAnswerList({
					paperId: this.paperId
				}).then(res => {
					this.paperInfo = res.data;
					this.getInfoList(this.paperInfo.questionInfoDtoList || [])
				})
			},
			getInfoList(questions) {
				var questionIndex = -1;
				questions.map((item, index) => {
					var indexId = this[item.questionType + "ORI"].length + 1;
					questionIndex++;
					var optionObject = {};
					var optionsArr = [];
					var options = item.options;
					if(options) {
						optionObject = JSON.parse(options);
						optionsArr = Object.values(optionObject);
					}
					var userAnswer = item.userAnswer || '';
					var userAnswers = [];
					if(userAnswer) {
						userAnswers = userAnswer.split('');
					}
					var topic = Object.assign({}, item, {
						paperId: this.paperId,
						indexId: indexId,
						questionIndex: questionIndex,
						score: item.score || 0,
						questionScore: item.questionScore || 0,
						optionsArr: optionsArr,
						answer: item.answer,
						userAnswer: userAnswer,
						userAnswers: userAnswers,
						overed: userAnswer ? true : false, //是否已经答题
						isError: item.isError, //是否正确
					})
					this.pushList(topic);
					this[item.questionType + 'ORI'].push(item)
				})
				this.questionIndex = 0;
			},
		},
	}
</script>